import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import tup from './img/image.png'
import gg from './img/gg.png'
import Btn from '../../conpoment/btn';
import styles from './index.module.css';
import { PayCircleOutline, CalendarOutline } from 'antd-mobile-icons'
function Index() {
  const navigate = useNavigate();
  const [activeTab, setActiveTab] = useState('门诊');
  // 门诊服务图标数据
  const outpatientServices = [
    { name: '门诊报告', icon: gg, color: '#2196F3' },
    { name: '在线缴费', icon: gg, color: '#4CAF50' },
    { name: '自助开单', icon: gg, color: '#FF9800' },
    { name: '候诊查询', icon: gg, color: '#9C27B0' },
    { name: '医技预约', icon: gg, color: '#F44336' },
    { name: '自助取号', icon: gg, color: '#607D8B' },
    { name: '门诊导诊单', icon: gg, color: '#795548' },
    { name: '电子票据', icon: gg, color: '#00BCD4' }
  ];
  // 住院服务图标数据
  const inpatientServices = [
    { name: '住院缴费', icon: gg, color: '#2196F3' },
    { name: '住院清单', icon: gg, color: '#4CAF50' },
    { name: '床位查询', icon: gg, color: '#FF9800' },
    { name: '探视预约', icon: gg, color: '#9C27B0' },
    { name: '出院办理', icon: gg, color: '#F44336' },
    { name: '住院报告', icon: gg, color: '#00BCD4' },
    { name: '护理服务', icon: gg, color: '#795548' },
    { name: '营养配餐', icon: gg, color: '#607D8B' }
  ];
  // 综合服务图标数据
  const comprehensiveServices = [
    { name: '智能导诊', icon: gg, color: '#2196F3' },
    { name: '健康档案', icon: gg, color: '#4CAF50' },
    { name: '体检预约', icon: gg, color: '#FF9800' },
    { name: '疫苗接种', icon: gg, color: '#9C27B0' },
    { name: '急救服务', icon: gg, color: '#F44336' },
    { name: '心理咨询', icon: gg, color: '#00BCD4' },
    { name: '康复训练', icon: gg, color: '#795548' },
    { name: '健康咨询', icon: gg, color: '#607D8B' }
  ];
  // 根据当前标签页获取对应的服务数据
  const getCurrentServices = () => {
    switch (activeTab) {
      case '门诊':
        return outpatientServices;
      case '住院':
        return inpatientServices;
      case '综合':
        return comprehensiveServices;
      default:
        return outpatientServices;
    }
  };
  // 健康资讯数据 - 根据图片设计
  const healthNews = [
    {
      id: 1,
      title: '世界糖尿病日,应该注意什么来调节?',
      category: '#健康养生',
      likes: 520,
      views: 2000,
      thumbnail: tup
    },
    {
      id: 2,
      title: '世界糖尿病日,应该注意什么来调节?',
      category: '#健康养生',
      likes: 520,
      views: 2000,
      thumbnail: tup
    }
  ];
  const handleServiceClick = (serviceName: string) => {
    console.log(`点击了服务: ${serviceName}`);
    // 根据服务名称跳转到不同页面
    switch (serviceName) {
      case '门诊报告':
        navigate('/outpatient_guide');
        break;
      case '在线缴费':
        navigate('/payment');
        break;
      case '自助开单':
        navigate('/self-service-order');
        break;
      case '候诊查询':
        navigate('/waiting');
        break;
      case '医技预约':
        navigate('/medical-tech-appointment', { 
          state: { from: 'medical-tech-appointment' } 
        });
        break;
      case '自助取号':
        navigate('/self-service-number');
        break;
      case '门诊导诊单':
        navigate('/outpatient-guide-sheet');
        break;
      case '电子票据':
        navigate('/invoice');
        break;
      // 住院服务
      case '住院缴费':
        navigate('/inpatient-payment');
        break;
      case '住院清单':
        navigate('/inpatient-list');
        break;
      case '床位查询':
        navigate('/bed-query');
        break;
      case '探视预约':
        navigate('/visit-appointment');
        break;
      case '出院办理':
        navigate('/discharge');
        break;
      case '住院报告':
        navigate('/inpatient-reports');
        break;
      case '护理服务':
        navigate('/nursing-service');
        break;
      case '营养配餐':
        navigate('/nutrition');
        break;
      // 综合服务
      case '智能导诊':
        navigate('/smart-guide');
        break;
      case '健康档案':
        navigate('/health-record');
        break;
      case '体检预约':
        navigate('/physical-exam');
        break;
      case '疫苗接种':
        navigate('/vaccination');
        break;
      case '急救服务':
        navigate('/emergency');
        break;
      case '心理咨询':
        navigate('/psychological-counseling');
        break;
      case '康复训练':
        navigate('/rehabilitation');
        break;
      case '健康咨询':
        navigate('/health-consultation');
        break;
      default:
        console.log(`未处理的服务: ${serviceName}`);
        break;
    }
  };
  const handleTabChange = (tab: string) => {
    setActiveTab(tab);
  };
const nav=useNavigate()
  return (
    <div className={styles.container}>
    
      {/* 快速访问按钮 */}
      <div className={styles.quickAccess}>
        <div className={styles.quickButton} onClick={() => navigate('/appointment')}>
          <div className={styles.buttonIcon}><CalendarOutline /></div>
          <div className={styles.buttonText}>
            <div className={styles.buttonTitle}>门诊挂号</div>
            <div className={styles.buttonSubtitle}>便捷预约挂号</div>
          </div>
        </div>
        <div className={styles.quickButton} onClick={() => navigate('/payment')}>
          <div className={styles.buttonIcon}><PayCircleOutline /></div>
          <div className={styles.buttonText}>
            <div className={styles.buttonTitle}>门诊缴费</div>
            <div className={styles.buttonSubtitle}>便捷预约挂号</div>
          </div>
        </div>
      </div>
      {/* 公告栏 */}
      <div className={styles.announcement}>
        <div className={styles.announcementLeft} onClick={() =>nav('/list')}>
          <span className={styles.announcementLabel}>公告</span>
          <span className={styles.announcementText}>智慧医院即将上线通知</span>
        </div>
      </div>
      {/* 服务分类标签 */}
      <div className={styles.serviceTabs}>
        <div 
          className={`${styles.tab} ${activeTab === '门诊' ? styles.activeTab : ''}`}
          onClick={() => handleTabChange('门诊')}
        >
          门诊
        </div>
        <div 
          className={`${styles.tab} ${activeTab === '住院' ? styles.activeTab : ''}`}
          onClick={() => handleTabChange('住院')}
        >
          住院
        </div>
        <div 
          className={`${styles.tab} ${activeTab === '综合' ? styles.activeTab : ''}`}
          onClick={() => handleTabChange('综合')}
        >
          综合
        </div>
      </div>
      {/* 服务图标网格 */}
      <div className={styles.serviceGrid}>
        {getCurrentServices().map((service, index) => (
          <div 
            key={index} 
            className={styles.serviceItem}
            onClick={() => handleServiceClick(service.name)}
            style={{ '--service-color': service.color } as React.CSSProperties}
          >
            <div className={styles.serviceIcon} style={{ color: service.color }}>
              <img src={service.icon} alt="" />
            </div>
            <div className={styles.serviceName}>{service.name}</div>
          </div>
        ))}
      </div>
    
    </div>
  )
}
export default Index